<template>
    <div class="div_box">
      <!-- <button @click="isPause = false">播放</button>
          <button @click="isPause = true">停止播放</button> -->
  
      <div class="div_left">
        <div class="camara_box">
          <!-- <div style="height: 500px; background: black; position: relative; width: 100%"> -->
          <div
            id="265Player"
            v-if="codec === 1 || codec === 2"
            class="camara_video"
          ></div>
          <!-- </div> -->
          <div
            class="none"
            :style="
              noneTest == '设备连接失败,请重试'
                ? 'color:red'
                : 'color: #cfd3ec38;'
            "
          >
            {{ noneTest }}
          </div>
          <div class="div_right" v-if="isShowCtrl">
            <div
              class="video-ctrl-box"
              :style="
                noneTest == '设备连接失败,请重试'
                  ? 'background: rgba(255, 255, 255, 0.2)'
                  : 'background: rgba(0, 0, 0, 0.2)'
              "
            >
              <i
                class="el-icon-caret-left"
                @click="cloudControl('spin_left')"
              ></i>
              <i
                class="el-icon-caret-right"
                @click="cloudControl('spin_right')"
              ></i>
              <i
                class="el-icon-caret-bottom"
                @click="cloudControl('spin_bottom')"
              ></i>
              <i class="el-icon-caret-top" @click="cloudControl('spin_top')"></i>
              <div
                class="ctrl-circle"
                :style="
                  noneTest == '设备连接失败,请重试'
                    ? 'background: rgba(255, 255, 255, 0.2)'
                    : 'background: rgba(0, 0, 0, 0.2)'
                "
              >
                控制台
              </div>
            </div>
          </div>
        </div>
  
        <!-- <div style="width: 800px;height: 6vh;overflow: hidden;position: relative;">
                  <div class="timeLineContainer"
                      style="width: 70vw;height: 6vh;background-color: #1E2436;position: absolute;left: -34.2%;"
                      ref="timeLineContainer">
                      <canvas ref="canvas" @mousemove="onMousemove" @mousedown="onMousedown" @mousewheel="onMouseweel"
                          @mouseup="onMouseup" @mouseout="onMouseout"></canvas>
                  </div>
              </div> -->
  
        <div class="webplayer_menu">
          <div class="webplayer-menu--left">
            <el-tooltip
              class="item"
              effect="dark"
              content="播放"
              placement="bottom"
              v-show="isPause"
            >
              <i
                class="el-icon-video-play"
                id="playerResumeButton"
                @click="isPause = false"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="暂停"
              placement="bottom"
              v-show="!isPause"
            >
              <i
                class="el-icon-video-pause"
                id="playerPauseButton"
                style="color: #7367f0"
                @click="isPause = true"
              ></i>
            </el-tooltip>
          </div>
          <div class="webplayer-menu--right">
            <el-tooltip
              class="item"
              effect="dark"
              content="控制台"
              placement="bottom"
            >
              <i
                class="iconfont fangxiangkongzhi"
                @click="onIsShowCtrl()"
                style="color: #7367f0; margin-left: 28px; font-size: 28px"
              ></i>
            </el-tooltip>
            <el-dropdown trigger="click" @command="onDropdown">
              <span class="el-dropdown-link">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="灯光控制"
                  placement="bottom"
                >
                  <i
                    class="iconfont dengguang1"
                    style="color: #7367f0"
                    v-if="lamplight == 'light_on'"
                  ></i>
                  <i
                    class="iconfont guanbidengguang1"
                    style="color: #7367f0"
                    v-else-if="lamplight == 'light_off'"
                  ></i>
                  <i
                    class="iconfont icon-zhaoming"
                    style="color: #7367f0"
                    v-else-if="lamplight == 'light_auto'"
                  ></i>
                </el-tooltip>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="light_on"> 开灯 </el-dropdown-item>
                <el-dropdown-item command="light_off">关灯 </el-dropdown-item>
                <el-dropdown-item command="light_auto"> 自动 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tooltip
              class="item"
              effect="dark"
              content="180度翻转"
              placement="bottom"
            >
              <i
                class="iconfont icon-xuanzhuan"
                @click="cloudControl('reverse')"
                style="color: #7367f0; margin-left: 28px"
              ></i>
            </el-tooltip>
  
            <!-- <i class="iconfont huatong" id="audioTalkStop" style="color: #7367F0;" @click="ezopenStopTalk"
                          v-show="!startTalkshow"></i>
                      <i class="iconfont huatong1" id="audioTalkStart" @click="ezopenStartTalk" v-show="startTalkshow"></i>
                      <i class="iconfont guanbiyinliang" @click="openSound" v-show="openSoundPromiseshow"></i>
                      <i class="iconfont zengdayinliang" @click="closeSound" style="color: #7367F0;"
                          v-show="!openSoundPromiseshow"></i>
                      <el-tooltip class="item" effect="dark" content="截图" placement="bottom">
                          <i class="iconfont qiepianjietu" @click="capturePicture"></i>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
                          <i class="iconfont quanping" @click="fullScreen"></i>
                      </el-tooltip> -->
          </div>
        </div>
  
        <!-- <div class="huifang">
                  <div @click="zhibo" :style="live == 1 ? 'background-color: #7467EF;color: #fff;' : ''">直播</div>
                  <div @click="playback" :style="live == 2 ? 'background-color: #7467EF;color: #fff;' : ''">回放</div>
              </div> -->
  
        <!-- <div class="div_zoom">
                  <div @mousedown='lessen' @mouseup='mouseupClick'>-</div>
                  <div>缩放</div>
                  <div @mousedown='magnify' @mouseup='mouseupClick'>+</div>
              </div>
  
              <div class="div_focal">
                  <div @mousedown='near' @mouseup='mouseupClick'>-</div>
                  <div>焦距</div>
                  <div @mousedown='distant' @mouseup='mouseupClick'>+</div>
              </div> -->
      </div>
    </div>
  </template>
  
  <script>
  import { reqCameraget, reqCameralogin } from "@api/api.js";
  import asc from "@utils/asc.js"; //前端加解密
  import TimeScale from "./mixins/TimeScale.js";
  import EZUIKit from "ezuikit-js"; //引用萤石云播放器插件 指定版本
  import { isShallow } from "vue";
  
  export default {
    props: {
      deviceInfo: {
        type: Object,
        default: () => {},
      },
    },
    components: {
      // videoPlayer,
    },
    mixins: [TimeScale],
    data() {
      return {
        isPause: true,
        isLoading: false,
        player: null,
        t: null,
        url: "",
        server_ip: "",
        timer: "",
        codec: 1,
        play_token: "",
        token: "",
        stopPromiseshow: true,
        lamplight: "light_off", //灯光控制
        noneTest: "加载中",
        isShowCtrl: false,
      };
    },
    computed: {},
    watch: {
      isPause: {
        handler: function (val, oldval) {
          if (val) {
            this.stop();
          } else {
            this.play();
          }
        },
      },
    },
    methods: {
      // 显示控制台
      onIsShowCtrl() {
        this.isShowCtrl = !this.isShowCtrl;
      },
      onDropdown(e) {
        // console.log(e);
        this.lamplight = e;
        this.cloudControl(e);
      },
      cloudControl(command) {
        if (
          [
            "reverse",
            "light_on",
            "light_off",
            "light_auto",
            "spin_top",
            "spin_left",
            "spin_bottom",
            "spin_right",
          ].indexOf(command) !== -1
        ) {
          this.player.sendCommand(command);
        } else {
          alert("不支持的云台指令");
        }
      },
      init() {
        var t = new Api();
        // console.log(t);
        // 登录
        // t.login('18194005618', 'Yl86503860@').then(res => {
        // t.login('787814981@qq.com', 'qwe123').then(res => {
        t.login("yuanliu@hongshi.com", "yuanliuhongshi")
          .then((res) => {
            // console.log(res);
            if (res.result == 0) {
              this.token = res.token;
              // 获取设备列表
              t.getDeviceList(res.token)
                .then((res) => {
                  // console.log(res);
                  if (res.result == 0) {
                    this.server_ip = res.server_ip;
  
                    // 43176050 39623600 14998052 35890596 39508455
                    // 获取播放地址并初始化api播放
                    t.requestPlayAddress(
                      this.token,
                      this.deviceInfo.deviceId,
                      this.server_ip,
                      1
                    )
                      .then((res) => {
                        // console.log(res);
                        console.log(
                          this.deviceInfo.deviceId,
                          "this.deviceInfo.deviceId"
                        );
                        if (res.code === 1000) {
                          this.codec = res.codec;
                          this.play_token = res.play_token;
  
                          // // width,height 移动端h5根据res.width, res.height比例进行适配,codec为4时，传入的width,height就是canvas的宽高
                          // let pageWidth = this.$refs.page.clientWidth;
                          // let pageHeight = this.$refs.page.clientHeight;
                          // console.log(pageWidth, pageHeight);
                          let width = res.width;
                          let height = res.height;
                          this.player = t.init(
                            this.codec,
                            this.server_ip,
                            this.play_token,
                            width,
                            height
                          );
                          if (!this.player) {
                            //   alert("您的浏览器不支持WebAssembly，不支持播放");
                          } else {
                            //   alert("api播放初始化完成");
                            // this.play()
                            this.isPause = false;
                          }
                          console.log(this.player);
                        } else {
                          this.noneTest = res.err;
                          // this.$modal.notifyWarning(res.err);
                        }
                      })
                      .catch((err) => {
                        console.log(err);
                      });
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      play() {
        // this.player.play();
        this.player.play("265Player", false);
        // this.stopPromiseshow = false;
        // 加载动画显示判断
        // this.isLoading = true;
        // clearInterval(this.timer);
        this.timer = "";
        // this.timer = setInterval(() => {
        // let isLoading = this.player.showLoading();
        // if (!isLoading) {
        //     clearInterval(this.timer);
        //     this.timer = "";
        //     this.isLoading = false;
        //     console.log("end");
        // }
        // }, 100);
      },
  
      stop() {
        this.player.stop();
        // this.stopPromiseshow = true;
      },
      cloudControl(command) {
        if (
          [
            "reverse",
            "light_on",
            "light_off",
            "light_auto",
            "spin_top",
            "spin_left",
            "spin_bottom",
            "spin_right",
          ].indexOf(command) !== -1
        ) {
          this.player.sendCommand(command);
          if (command == "light_on") {
            this.lightStatus = 1001;
          } else if (command == "light_off") {
            this.lightStatus = 1002;
          } else if (command == "light_auto") {
            this.lightStatus = 1003;
          }
          // this.getVideoAddressCtrl();
        } else {
          alert("不支持的云台指令");
        }
        this.isLight = false; //隐藏开关自动等文字
      },
      // 获取播放地址--控制台
      getVideoAddressCtrl() {
        this.t
          .requestPlayAddress(this.token, this.sn, this.server_ip, 1)
          .then((res) => {
            if (res.code == 1002) return alert("设备连接失败,请重试");
            if (
              res.code == 1003 ||
              res.code == 1004 ||
              res.code == 1012 ||
              res.code == 1013
            )
              return alert("无法获取设备信息，请重试");
            if (res.code === 1000) {
              this.codec = res.codec;
              this.play_token = res.play_token;
  
              // 初始化云台支持类型，前端控制是否显示该类型的云台操作
              this.isSupportLightCtr = res.light_ctrl; // 灯光控制
              // if (res.light_ctrl) {
              //   this.lightStatus = res.light_status; // 若支持灯光控制，初始灯光状态,（1001开启，1002关闭，1003自动）
              // }
              this.isSupportReverseCtr = res.reverse_ctrl; // 翻转
              this.isSupportPtzCtr = res.ptz_ctrl; // 运动翻转
  
              //设备是否在线
              this.t
                .requestDevicesStatus([this.sn], this.server_ip)
                .then((res) => {
                  if (res.code == 1000) {
                    this.deviceStatus = res.data[this.sn];
                  }
                });
  
              let width = res.width;
              let height = res.height;
              this.videoHeigth = (res.height * 100) / res.width; //视频高vw
              console.log(this.videoHeigth);
              // console.log("width", width);
              // console.log("height", height);
              this.player = this.t.init(
                this.codec,
                this.server_ip,
                this.play_token,
                width,
                height
              );
              if (!this.player) {
                alert("您的浏览器不支持WebAssembly，不支持播放");
              } else {
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 销毁播放器实例
      destroy() {
        this.t &&
          this.t
            .loginOut(this.token)
            .then((res) => {
              // console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        this.noneTest = "加载中";
        // this.player.destroy();
      },
    },
    async created() {},
    mounted() {},
  };
  </script>
  
  <style lang="less" scoped>
  .div_box {
    // height: 79vh;
    // height: calc(100vh - 122px);
    overflow: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
  
    .div_left {
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      // left: -5%;
  
      .camara_box {
        width: 100%;
        height: 53vh;
        background: black;
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
  
        .camara_video {
          z-index: 1;
        }
  
        .none {
          color: #cfd3ec38;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 0;
          font-size: 16px;
        }
      }
  
      .webplayer_menu {
        background: @primaryBgcolor5;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 55px;
        padding: 0 16px;
        box-sizing: border-box;
        position: relative;
  
        i {
          font-size: 30px;
          cursor: pointer;
        }
  
        .webplayer-menu--left {
          width: 50%;
        }
  
        .webplayer-menu--right {
          width: 50%;
          // padding-left: 10.5%;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
  
          i {
            margin-left: 28px;
          }
        }
      }
  
      .huifang {
        display: flex;
        background-color: #e8e8e8;
        border-radius: 20px;
        // margin: 3% auto;
        margin-top: 2%;
        margin-bottom: 2%;
  
        > div {
          width: 65px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20px;
          color: #000000;
          cursor: pointer;
  
          &:hover {
            color: #7467ef;
          }
        }
      }
  
      .slot_tips_h5player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        background: rgba(0, 0, 0, 0.5);
        font-size: 14px;
        display: flex;
        color: rgba(255, 255, 255, 0.8) !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
  
        i {
          font-size: 60px;
        }
  
        span {
          margin: 7px;
          font-size: 16px;
        }
      }
    }
  
    .div_right {
      position: absolute;
      width: 180px;
      height: 180px;
      // width: 15%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: @primaryThemeTxtColor2;
      bottom: 2%;
      right: 6.5%;
      z-index: 999;
      transition: all 0.8s;
    }
  
    .div_zoom {
      position: absolute;
      right: -22%;
      width: 30%;
      top: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: @primaryFFFColor3;
  
      > div:nth-of-type(2) {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
  
      > div:first-of-type {
        width: 26px;
        height: 26px;
        background: @primaryBgcolor3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        cursor: pointer;
      }
  
      > div:last-of-type {
        width: 26px;
        height: 26px;
        background: @primaryBgcolor3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        cursor: pointer;
      }
    }
  
    .div_focal {
      position: absolute;
      right: -22%;
      width: 30%;
      top: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: @primaryFFFColor3;
  
      > div:nth-of-type(2) {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
  
      > div:first-of-type {
        width: 26px;
        height: 26px;
        background: @primaryBgcolor3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        cursor: pointer;
      }
  
      > div:last-of-type {
        width: 26px;
        height: 26px;
        background: @primaryBgcolor3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        cursor: pointer;
      }
    }
  }
  
  ::v-deep .video-player {
    // width: 100vw !important;
    width: 100% !important;
  }
  
  .video-ctrl-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    //   background: @primaryBgcolor3;
    background: rgba(0, 0, 0, 0.2);
    // position: relative;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  
    //   .video-ctrl {
    //   }
    .ctrl-circle {
      position: absolute;
      width: 70px;
      height: 70px;
      // background: @primaryBgcolor4;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      color: @primaryFFFColor3;
    }
  
    i {
      cursor: pointer;
      position: absolute;
      // color: @primaryFFFColor4;
      // color: rgba(115, 103, 240, 0.7);
      color: rgba(255, 255, 255, 0.8);
  
      &:active {
        color: #7467ef;
      }
    }
  
    .el-icon-caret-left {
      top: 47%;
      left: 27px;
      transform: translateX(-50%) scale(1.5);
    }
  
    .el-icon-caret-right {
      top: 48%;
      right: 11px;
      transform: translateX(-50%) scale(1.5);
    }
  
    .el-icon-caret-top {
      left: 50%;
      transform: translateX(-50%) translateY(17px) scale(1.5);
    }
  
    .el-icon-caret-bottom {
      left: 50%;
      bottom: 35px;
      transform: translateX(-50%) translateY(16px) scale(1.5);
    }
  }
  </style>
  